<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Data-Table 表格</title>
    <!--<link rel="stylesheet" href="http://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css">-->
    <link rel="stylesheet" href="/frame/static/css/style.css">
    <link rel="icon" href="/frame/static/image/code.png">
    <link rel="stylesheet" href="/frame/layui/css/layui.css">
</head>
<body class="body">

<!-- 工具集 -->
<div class="my-btn-box layui-form">
    <span class="fl">
        <a class="layui-btn layui-btn-danger radius btn-delect" id="btn-delete-all">批量删除</a>
        <a class="layui-btn btn-add btn-default" id="btn-add">添加</a>
        <a class="layui-btn btn-add btn-default" id="btn-refresh"><i class="layui-icon">&#x1002;</i></a>
    </span>

    <span class="fr">
        <span class="layui-form-label">菜单名：</span>
        <div class="layui-input-inline">
            <input type="text" autocomplete="off" name="system_menu_name" placeholder="按菜单名查询" class="layui-input">
        </div>
        <button class="layui-btn mgl-20" id="btn-search">查询</button>
    </span>
    <span class="fr">
        <span class="layui-form-label">父级菜单：</span>
        <div class="layui-input-inline">
           <select id="parent-list" layer- name="system_menu_fid">
           </select>
        </div>
    </span>
</div>

<!-- 表格 -->
<div id="dateTable"  lay-filter="menu">


</div>

<script type="text/javascript" src="/frame/layui/layui.js"></script>
<script type="text/javascript" src="/frame/static/js/vip_comm.js"></script>


<script type="text/javascript">
    var tableIns;
    var rowJSONDate;
    // layui方法
    layui.use(['table', 'form', 'layer', 'vip_table'], function () {
        // 操作对象
        var form = layui.form
                , table = layui.table
                , layer = layui.layer
                , vipTable = layui.vip_table
                , $ = layui.jquery;
        //遍历父级标签
        $.ajax({
            url: "/menu/queryParent",
            type: "POST",
            dataType: "json",
            success: function (result) {
                $("#parent-list").empty();
                var li = "<option value=''>请选择</option>"
                $.each(result,function(i,item){
                    li += "<option value='"+item.system_menu_id+"'>"+item.system_menu_name+"</option>";
                })
                $("#parent-list").append(li);
                form.render("select")
            }
        });
        // 表格渲染
       tableIns = table.render({
            elem: '#dateTable'                  //指定原始表格元素选择器（推荐id选择器）
            , height: vipTable.getFullHeight() + 10    //容器高度
            , cols: [[                  //标题栏
                {checkbox: true, sort: true, fixed: true, space: true}
                , {field: 'system_menu_name', title: '菜单名', width: 210}
                , {field: 'system_menu_url', title: '菜单地址', width: 400}
                , {field: 'system_menu_fname', title: '父级菜单', width: 180}
                , {field: 'system_menu_icon', title: '图标', width: 180}
                , {field: 'system_menu_state', title: '当前状态', width: 180,templet:'#stateTpl'}
                , {fixed: 'right', title: '操作', width: 210, align: 'center', toolbar: '#barOption'} //这里的toolbar值是模板元素的选择器
            ]]
            , id: 'dataCheck'
            , url: '/menu/query'
            , method: 'post'
            , where: {'system_menu_name': null, 'system_menu_fid': null}
            , page: true
            , limits: [12, 24, 36, 48, 60]
            , limit: 12 //默认采用30
            , loading: true
            , done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res);
                //得到当前页码
                console.log(curr);
                //得到数据总量
                console.log(count);
            }
        });
        // 获取选中行
        $("#btn-delete-all").on('click',function(){
            var checkTr = table.checkStatus("dataCheck");
            if(typeof(checkTr.data[0]) == "undefined"){
                layer.alert("请选择要删除的行！");
            }else{
                layer.confirm("确定删除吗？",function(index){
                    var ids = new Array();
                    $.each(checkTr.data,function(i,item){
                        ids[i] = "'"+checkTr.data[i]['system_menu_id']+"'";
                    })
                    deleteAll(ids.toString());
                    layer.close(index)
                })
            }
        });
        //删除所有行
        function deleteAll(arg){
            $.ajax({
                url:'/menu/delete'
                ,data:{'ids':'['+arg+']'}
                ,dataType:'json'
                ,success:function(data){
                    if(data.result>0){
                        layer.msg("删除成功！")
                        tableIns.reload();
                    }
                }
                ,error:function(data){
                    alert('error'+data)
                }
            });
        }
        // 刷新
        $('#btn-refresh').on('click', function () {
            tableIns.reload();
        });
        //条件搜索
        $('#btn-search').on('click', function () {
            tableIns.reload({
                where:{'system_menu_name':$("input[name='system_menu_name']").val(),'system_menu_fid':$("select[name='system_menu_fid']").val()}
            });
        });

        // 监听工具栏事件
        table.on('tool(menu)',function (obj) {
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的DOM对象
            if(layEvent === 'detail'){ //查看
            } else if(layEvent === 'del'){ //删除
                layer.confirm('确定删除此菜单吗？', function(index){
                    obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                    layer.close(index);
                    var ids = "'"+data['system_menu_id']+"'";
                    deleteAll(ids);
                });
            } else if(layEvent === 'edit'){ //编辑
                rowJSONDate = data;
                layer.open({
                    type: 2,
                    title: '编辑菜单',
                    shadeClose: true,
                    shade: false,
                    area: ['500px', '400px'],
                    content: ['/redirectDir/usercenter/menu_add'], //iframe的url，no代表不显示滚动条
                });
                //同步更新缓存对应的值
                /*obj.update({
                    account_role_name: '123'
                    ,title: 'xxx'
                });*/
            }
        });
        //点击添加弹窗
        $("#btn-add").on("click",function () {
            rowJSONDate = null;
            layer.open({
                type: 2,
                title: '添加菜单',
                shadeClose: true,
                shade: false,
                area: ['500px', '400px'],
                content: ['/redirectDir/usercenter/menu_add'], //iframe的url，no代表不显示滚动条
            });
        });

// you code ...

    });
</script>

<script type="text/html" id="stateTpl">
    {{#  if(d.system_menu_state == 0){ }}
    正常
    {{#  } else { }}
    冻结
    {{#  } }}
</script>
<!-- 表格操作按钮集 -->
<script type="text/html" id="barOption">
    <a class="layui-btn layui-btn-mini" lay-event="detail">授权</a>
    <a class="layui-btn layui-btn-mini layui-btn-normal" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-mini layui-btn-danger" lay-event="del">删除</a>
</script>
</body>
</html>